<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a><cite>用户管理</cite></a>
    <a><cite>登录历史</cite></a>
  </div>
</div>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layadmin-search">
      <form class="layui-form" method="post" lay-filter="form_user_search" id="filterForm">
        <script type="text/html" template lay-url="agent-admin/channels/simple"
                lay-done="layui.data.sendParams(d.params)">
          <div class="layui-inline">
            <div class="layui-form-label">关键字</div>
            <div class="layui-input-inline" style="width: 100px">
              <input type="text" name="keyword"
                     value="{{decodeURIComponent(layui.router().search.keyword || '')}}"
                     class="layui-input"
                     placeholder="请输入手机号">
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">渠道</div>
            <div class="layui-input-inline" style="width: 120px">
              <select name="channel_id">
                <option value="">请选择渠道</option>
                {{# layui.each(d.data, function(index, item){ }}
                <option value="{{ item.id }}">{{ item.name }}</option>
                {{# }) }}
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">登录方式</div>
            <div class="layui-input-inline" style="width: 120px">
              <select name="login_mode">
                <option value="">全部</option>
                <option value="password">密码登录</option>
                <option value="verify_code">验证码登录</option>
                <option value="verify_code_fast">验证码快速登录</option>
                <option value="register">注册后直接登录</option>
              </select>
            </div>
          </div>
          <div class="layui-inline">
            <div class="layui-form-label">日期范围</div>
            <div class="layui-inline" id="date_range">
              <div class="layui-input-inline">
                <input type="text" name="start_date" autocomplete="off" id="start_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.start_date || ''}}"
                       placeholder="开始日期">
              </div>
              <div class="layui-input-inline">~</div>
              <div class="layui-input-inline">
                <input type="text" name="end_date" autocomplete="off" id="end_date" class="layui-input"
                       style="width: 100px" value="{{layui.router().search.end_date || ''}}"
                       placeholder="结束日期">
              </div>
            </div>
          </div>
          <div class="layui-inline layui-btn-group">
            <button type="submit" lay-submit class="layui-btn" lay-filter="submit_user_search">
              <i class="layui-icon layui-icon-search"></i>查询
            </button>
            <button type="submit" lay-submit class="layui-btn layui-btn-warm"
                    lay-filter="reset_user_search">
              <i class="layui-icon layui-icon-close"></i>重置
            </button>
          </div>
          <button type="submit" lay-submit class="layui-btn layui-btn-normal"
                  lay-filter="user_export">
            <i class="layui-icon layui-icon-export"></i>导出
          </button>
        </script>
      </form>
    </div>
    <div class="layui-card-body">
      <div id="table_user"></div>
      <script type="text/html" id="tpl_channel">
        {{# if (d.channel) { }}
        {{d.channel.name}}
        {{# } }}
      </script>
      <script type="text/html" id="tpl_mode">
        {{# if (d.login_mode) { }}
        {{d.login_mode.description}}
        {{# } }}
      </script>

      <script type="text/html" id="tpl_mobile">
        {{# if (d.mobile) { }}
        {{d.mobile}}
        {{# } else { }}
        <span class="layui-font-red"></span>
        {{# } }}
      </script>
    </div>
  </div>
</div>

<script>
  layui.data.sendParams = function (obj) {
    layui.use(['fox_table', 'laydate'], function () {
      let $ = layui.$
        , fox_table = layui.fox_table
        , admin = layui.admin
        , form = layui.form
        , view = layui.view
        , laydate = layui.laydate

      laydate.render({
        elem: '#date_range'
        , range: ['#start_date', '#end_date']
        , max: (new Date()).toDateString()
      });

      form.render(null, 'form_user_search')

      let resourceUrl = 'agent-admin/user_login_history'

      // 列表查询
      fox_table.render({
        id: 'table_user'
        , url: resourceUrl
        , width: 800
        , cols: [[
          {title: '手机号', templet: '#tpl_mobile', width: 150}
          , {title: '登录方式', templet: '#tpl_mode', width: 150}
          , {title: '登录渠道', templet: '#tpl_channel', width: 180}
          , {title: '登录时间', field: 'created_at', minWidth: 180, align: "center"}
        ]]
      });

      //搜索
      form.on('submit(submit_user_search)', function (d) {
        fox_table.reload(d.field);
        return false;
      });
      //重置
      form.on('submit(reset_user_search)', function (d) {
        form.val("form_user_search", {
          "keyword": ""
          , "channel_id": ""
          , "login_mode": ""
          , "start_date": ""
          , "end_date": ""
        });
        fox_table.reload({});
        return false;
      });

      form.on('submit(user_export)', function (data) {
        layer.load();
        admin.post('agent-admin/user_login_history/export' , data.field,function (res) {
          layer.confirm('数据下载中，请到下载中心查看下载任务进度.', function (index) {
            layer.close(index);
            location.hash = '/ops/download';
            return false;
          });
          layer.closeAll('loading');
        }, {hasLoading: true})
        return false;
      });
    })
  }
</script>

